<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-container>
                <!-- 左侧导航 -->
                <el-aside width="200px">
                    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-aside>
                <!-- 右侧列表 -->
                <el-main>
                    <el-button type="primary" icon="el-icon-plus" @click="addSubCategories()" >新增下级分类</el-button>
                    <el-button type="primary" icon="el-icon-delete" @click="deleteCategories()" >删除该分类</el-button>
                    <el-form :model="categories" >
                        <el-form-item v-if="categories.categoriesNumber != ''" label="分类编号" :label-width="formLabelWidth">
                            <el-input :disabled="categories.categoriesNumber != ''" v-model="categories.categoriesNumber"  autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类名称" :label-width="formLabelWidth">
                            <el-input v-model="categories.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item v-if="categories.username != ''" label="添加人" :label-width="formLabelWidth">
                            <el-input :disabled="categories.username != ''" v-model="categories.username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类介绍" :label-width="formLabelWidth">
                            <el-input v-model="categories.categoriesIntroduction" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="公司" :label-width="formLabelWidth">
                            <el-select v-model="categories.companyId" placeholder="请选择公司">
                                <el-option  v-for="type in companyList" :label="type.companyName"
                                            :value="type.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="cancelCategories()">取 消</el-button>
                        <el-button type="primary" @click="saveCategories()">确 定</el-button>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>


    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                treeData: null,
                defaultProps: {
                    children: 'subCategories',
                    label: 'name'
                },
                categories:{
                    id:'',
                    parentId:'',
                    name:'',
                    userId:'',
                    categoriesNumber:'',
                    categoriesIntroduction:'',
                    companyId:'',
                    username:''
                },
                addParentId:'',
                companyList:null
            }
        },
        methods:{
            //分页查询所有分类
            allCategories(){
                axios.get("/allCategories").then(value => {
                    if (value.data.code==1){
                        this.treeData=value.data.data;
                        this.allCompany();
                    }
                })
            },
            handleNodeClick(data){
                console.log(data);
                this.categories=data;
            },
            //点击添加下级分类
            addSubCategories(){
                if (this.categories.id==''){

                }else {
                    this.addParentId=this.categories.id;
                    this.categories={
                        id:'',
                        parentId:'',
                        name:'',
                        userId:'',
                        categoriesNumber:'',
                        categoriesIntroduction:'',
                        companyId:'',
                        username:''
                    }
                }
            },
            //点击删除分类
            deleteCategories(){
                axios.delete("/categories/"+this.categories.id).then(value => {
                    if (value.data.code===1){
                        this.allCategories();
                    }
                })
            },
            //添加and修改
            saveCategories(){
                if (this.categories.id==='' || this.categories.id==null){
                    this.categories.parentId=this.addParentId;
                    axios.post("/categories",this.categories).then(value => {
                        if (value.data.code==1){
                            this.allCategories();
                        }
                    })
                }else {
                    axios.put("/categories",this.categories).then(value => {
                        if (value.data.code==1){
                            this.allCategories();
                        }
                    })
                }
            },
            //取消
            cancelCategories(){
                this.categories={
                    id:'',
                    parentId:'',
                    name:'',
                    userId:'',
                    categoriesNumber:'',
                    categoriesIntroduction:'',
                    companyId:'',
                    username:''
                }
                this.allCategories();
            },
            //查询所有公司
            allCompany(){
                axios.get("/company").then(value => {
                    if (value.data.code==1){
                        this.companyList=value.data.data;
                    }
                })
            }
        },
        mounted(){
            this.allCategories();
            this.allCompany();
        }
    })
</script>
</html>